/**
 * Created by Ysssssss on 2021/4/8.
 */

import React, { useState } from 'react'
import { Menu } from 'antd';
const SubMenu = Menu.SubMenu;
import { withRouter } from "react-router-dom";

const PageSubNav = props => {
    const { history, navInfoList = [], className = "", style = {}, onClick, staticContext, location, match, ..._props } = props
    const { pathname } = location
    const [ openKeys, setOpenKeys] = useState([pathname.split('/')[1]])

    const onSelect = (e) => {
        if (e.key === pathname) return
        onClick && onClick(e.key)
        onClick || history.push(`/${e.key}`)
    }

    const handleOpenKeys = (keys) => {
        setOpenKeys(keys)
    }

    return (
        <div className={className || 'bilin-web-sub-nav'}
            style={style}
            {..._props}
        >
            <Menu
                theme="light"
                mode="inline"
                inlineIndent={12}
                onSelect={onSelect}
                onOpenChange={handleOpenKeys}
                selectedKeys={[pathname]}
                openKeys={openKeys}
            >
                {navInfoList.map((nav,index) => {
                    if (nav.subRoutes) {
                        return (
                            <SubMenu key={nav.path || index}
                                title={(
                                    <div className="sub-nav-item">{nav.name}</div>
                                )}
                            >
                                {(nav.subRoutes || []).map(item => (
                                    <Menu.Item key={item.path}>
                                        <div className={`sub-nav-item ${pathname === `/${item.path}` ? 'selected' : ''} ${item.className}`}>{item.name}</div>
                                    </Menu.Item>
                                ))}
                            </SubMenu>
                        )
                    } else {
                        return (
                            <Menu.Item key={nav.path}>
                                <div className={`sub-nav-item ${pathname === `/${nav.path}` ? 'selected' : ''} ${nav.className}`}>{nav.name}</div>
                            </Menu.Item>
                        )
                    }
                })}
            </Menu>
        </div>
    )
}

export default withRouter(PageSubNav)